<template>
	<div class="historyContainer">
		<van-cell-group>
			<van-cell title="历史记录">
				<template v-if="isDeleteShow">
					<span @click="$emit('deleteAll',[])">全部删除</span>
					&nbsp;
					&nbsp;
					<span @click="isDeleteShow=false">完成</span>
				</template>
				
				<van-icon v-else name="delete" @click="isDeleteShow=true"></van-icon>
			</van-cell>
			<van-cell 
				:title="item" 
				v-for="(item,index) in historySearch" 
				:key="item"
				@click="handleHistorySearchOrDelete(item,index)"
				>
			  <van-icon v-if="isDeleteShow" name="close" />
			</van-cell>
		</van-cell-group>
	</div>
</template>

<script>
	
	export default {
		name:"history",
		props:{
			historySearch:{
				type:Array,
				default(){
					return []
				}
			}
		},
		model:{
			prop:'historySearch',
			event:'deleteAll'
		},
		data(){
			return {
				isDeleteShow:false,
				//historyLists:[]
			}
		},
		
		methods:{
			handleHistorySearchOrDelete(item,index){
				// 判断是否处于删除历史状态
				if(this.isDeleteShow){
					// 是 那么删除对应的项
					this.historySearch.splice(index,1)
				}else{
					// 否 搜索对应的项
					this.$emit('search',item)
				}
					
			}
		}
	}
</script>

<style scoped lang="less">
</style>
